<template>
  <el-card shadow="never" :style="{height: gadgetHeight + 'px'}" class="aui-card--fill">
    <div>
      <div class="cardHeader" @mouseenter="mouseenter(true)" @mouseleave="mouseenter(false)"
           v-if="(gadgetSetting.headerTitle && gadgetSetting.headerTitle.trim().length>0) || (gadgetSetting.headerDescription && gadgetSetting.headerDescription.trim().length>0)">
              <span>
                <span
                  class="cardTitle threepoints" :title="gadgetSetting.headerTitle"
                  v-if='gadgetSetting.headerTitle && gadgetSetting.headerTitle.trim().length>0'>{{ gadgetSetting.headerTitle }}</span>
                <el-tooltip :open-delay="1000" class="item"
                            effect="dark"
                            :content="gadgetSetting.headerDescription"
                            placement="right"
                            v-if='gadgetSetting.headerDescription && gadgetSetting.headerDescription.trim().length>0'>
                <i class="cuifont icon_help_circle cardIcon"></i>
              </el-tooltip>
              </span>
              <MoreMenu :slicer='slicer' :gadgetId='id' :gadgetType='gadgetInfo.com' @updateQuery="query"/>
      </div>
      <div class="control-section">
        <div class="content-wrapper" v-loading="loading">
          <el-row :gutter="20">
            <el-col :span="8" style="text-align: center;">
              <div class="grid-content bg-purple">
                <p>{{ gadgetSetting.kpigadgetTitle }}</p>
                <div :style="{color:datasource.kpiColor}" class="kpi-rate">{{ datasource.kpiValue }}</div>
              </div>
            </el-col>
            <el-col :span="8" style="text-align: center; padding-top: 30px; font-size: 30px;">
              <div class="grid-content bg-purple kpi-icon">
                <i class="el-icon-sort"></i>
              </div>
            </el-col>
            <el-col :span="8" style="text-align: center;">
              <div class="grid-content bg-purple">
                <p>{{ gadgetSetting.benchMarkTitle }}</p>
                <div class="kpi-benchmarkrate">{{ datasource.benchmarkValue }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <model :showSetting="queryModelDefaultSetting.showSetting" @queryModelClosed="queryModelClosed"
           :dataInfo="queryModelDefaultSetting.dataInfo" :updateGadget="upgradeGadgetSetting" :slicer='slicer'/>
  </el-card>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
// import model from '@/components/gadget/query-model/query-model.vue'
import { defaultGadgetSettingList } from '@/utils/data-json'
export default ({
  mixins: [mixinGadgetViewModule],
  components: { model: () => import('@/components/gadget/query-model/query-model') },
  data: function () {
    return {
      datasource: {
        kpiValue: 0,
        benchmarkValue: 0,
        kpiColor: '#303133'
      },
      loading: false,
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: 'kpigadget',
          gadgetSetting: this._.find(defaultGadgetSettingList, { gadgetType: 'kpigadget' }).gadgetSetting
          // gadgetSetting: {
          //   kpigadgetTitle: 'KPI',
          //   benchMarkTitle: 'Benchmark',
          //   benchmarkValue: 0,
          //   redColor: '#f56c6c',
          //   redValue: 80,
          //   greenColor: '#16e426',
          //   greenValue: 50,
          //   yellowColor: '#e6a23c',
          //   yellowValue: 20,
          //   headerTitle: '',
          //   headerDescription: ''
          // }
        }
      },
      gadgetSetting: {}
    }
  },
  provide: {
    chart: []
  },
  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  created () {
    this.gadgetHeight = (this.gadgetInfo.h * 20) - 20
    this.query()
    this.subscribeMessage('runReport', this.query)
    this.$store.state.isWidget = false
  },
  methods: {
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    resized (i, newH, newW, newHPx, newWPx) {
      this.gadgetHeight = (newH * 20) - 20
      this.gadgetWidth = newWPx
    },
    query () {
      this.gadgetSetting = this.queryModelDefaultSetting.dataInfo.gadgetSetting
      this.loading = true
      var _self = this
      var param = {
        ...this.slicer,
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName,
        pageId: this.pageId,
        gadgetId: this.id,
        filter: this.getFilterStr()
      }
      this.$interface.reports.getReportDataInfo(param).then(({ data: res }) => {
        if (res.config) {
          _self.gadgetSetting = res.config
        }
        if (res.data && res.data.length > 0) {
          if (res.data[0].kpivalue) {
            _self.datasource.kpiValue = res.data[0].kpivalue
          }
          if (res.data[0].benchmarkvalue) {
            _self.datasource.benchmarkValue = res.data[0].benchmarkvalue
          } else {
            _self.datasource.benchmarkValue = _self.gadgetSetting.benchmarkValue
          }
          if (_self.datasource.kpiValue >= _self.gadgetSetting.redValue) {
            _self.datasource.kpiColor = _self.gadgetSetting.redColor
          } else if (_self.datasource.kpiValue >= _self.gadgetSetting.yellowValue) {
            _self.datasource.kpiColor = _self.gadgetSetting.yellowColor
          } else if (_self.datasource.kpiValue >= _self.gadgetSetting.greenValue) {
            _self.datasource.kpiColor = _self.gadgetSetting.greenColor
          }
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
})
</script>
<style scoped>
.el-card ::v-deep .el-card__body {
  padding: 0px !important;
}

.el-card ::v-deep .el-divider--horizontal {
  margin: 3px 0 !important;
}

.threepoints {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cardHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  border-bottom: 1px solid #eee;
  position: relative;
}

.cardHeader > span {
  display: inline-block;
  width: calc(100% - 30px);
}

.cardTitle {
  font-size: 16px;
  color: #000;
  font-weight: 700;
  display: inline-block;
  max-width: calc(100% - 30px);
  position: relative;
  top: 2px;
}

.cardIcon {
  font-size: 16px;
  font-weight: 600;
  margin-left: 10px;
  position: relative;
  top: -2px;
}

.kpi-rate {
  font-size: 40px;
  font-weight: 600;
}

.kpi-benchmarkrate {
  font-size: 40px;
  font-weight: 600;
}

.kpi-icon {
  text-align: center;
}

.kpi-icon i {
  transform: rotate(90deg);
}

</style>
